<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { graphic } from "echarts/core";
import patientList from "@/mock/patientData"; // 导入真实病人数据

const option = ref({});
const state = reactive({
  maleNum: 0,
  femaleNum: 0,
  totalNum: 0
});

const echartsGraphic = (colors: string[]) => {
  return new graphic.LinearGradient(1, 0, 0, 0, [
    { offset: 0, color: colors[0] },
    { offset: 1, color: colors[1] },
  ]);
};

const getData = () => {
  try {
    // 统计性别数据
    state.totalNum = patientList.length;
    state.maleNum = patientList.filter(p => p.gender === "男").length;
    state.femaleNum = patientList.filter(p => p.gender === "女").length;
    
    console.log("患者性别分布统计", {
      总数: state.totalNum,
      男性: state.maleNum,
      女性: state.femaleNum
    });
    
    setOption();
  } catch (err) {
    console.error("加载患者数据失败:", err);
  }
};

const setOption = () => {
  option.value = {
    title: {
      top: "center",
      left: "center",
      text: [`{value|${state.totalNum}}`, "{name|患者总数}"].join("\n"),
      textStyle: {
        rich: {
          value: {
            color: "#ffffff",
            fontSize: 24,
            fontWeight: "bold",
            lineHeight: 20,
            padding: [4, 0, 4, 0]
          },
          name: {
            color: "#ffffff",
            lineHeight: 20,
            fontSize: 14
          },
        },
      },
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
      formatter: function (params: any) {
        return `${params.name}<br/>${params.marker} ${params.value}人 (${params.percent}%)`;
      }
    },
    series: [
      {
        name: "性别分布",
        type: "pie",
        radius: ["40%", "70%"],
        itemStyle: {
          borderRadius: 6,
          borderColor: "rgba(255,255,255,0)",
          borderWidth: 2,
        },
        color: ["#0BFC7F", "#A0A0A0"],
        label: {
          show: true,
          formatter: "   {b|{b}}   \n   {c|{c}人}   {per|{d}%}  ",
          rich: {
            b: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 26,
            },
            c: {
              color: "#31ABE3",
              fontSize: 14,
            },
            per: {
              color: "#31ABE3",
              fontSize: 14,
            },
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        legend: {
          show: false,
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 36,
          smooth: 0.2,
        },
        data: [
          {
            value: state.maleNum,
            name: "男性",
            itemStyle: {
              color: echartsGraphic(["#0BFC7F", "#A3FDE0"]),
            },
          },
          {
            value: state.femaleNum,
            name: "女性",
            itemStyle: {
              color: echartsGraphic(["#A0A0A0", "#DBDFDD"]),
            },
          },
        ],
      },
    ],
  };
};

onMounted(() => {
  getData();
});
</script>

<template>
  <v-chart class="chart" :option="option" />
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>